<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../重置样式表/reset.css">
  <style>
    html,body{
      width: 100%;
      height: 100%;
    }
    #wrapper{
      position: relative;
      width: 100%;
      height: 100%;
    }

    #baidu{
      display: block;
      width: 100%;
      height: 300px;
      background-color: skyblue;
    }
    #shade{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
    }
    h1{
      width: 400px;
      position: absolute;
      top: 30%;
      left: 50%;
      margin-left: -190px;
      font-size: 40px;
      color: gold;
      font-weight: bold;
      text-align: center;
    }
    button{
      width: 100px;
      position: absolute;
      top: 38%;
      left: 50%;
      margin-left: -50px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="baidu">点我去百度</div>
    <div id="shade">
      <h1>恭喜您抽中一等奖！</h1>
      <button id="btn">确认领奖</button>
    </div>
  </div>

  <script type="text/javascript">
    const btn = document.getElementById('btn')
    const shade = document.getElementById('shade')
    const baidu = document.getElementById('baidu')

    btn.addEventListener('touchend',()=>{
      shade.style.display = 'none'
    })

    baidu.addEventListener('touchend',()=>{
      location.href = 'https://www.baidu.com'
      // console.log('@');
    })
  </script>
</body>
</html>